import React, { Component } from "react";

import { connect } from "react-redux";

const mapStateToProps = (state) => {
  // console.log(state);
  return {
    count: state.get("count"),
    list: state.getIn(["obj", "list"]),
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    inc() {
      dispatch({ type: "increment" });
    },
    dec() {
      dispatch({ type: "decrement" });
    },
    add(item) {
      dispatch({ type: "add", item });
    },
    remove(item) {
      dispatch({ type: "remove", item });
    },
  };
};

@connect(mapStateToProps, mapDispatchToProps)
class App extends Component {
  state = {
    value: "",
  };

  handleChange = (e) => {
    this.setState({
      value: e.target.value,
    });
  };

  push = () => {
    this.props.add(this.state.value);
    this.setState({
      value: "",
    });
  };

  render() {
    return (
      <>
        <h2>redux结合immutable</h2>
        <button onClick={this.props.dec}>-</button>
        <span>{this.props.count}</span>
        <button onClick={this.props.inc}>+</button>

        <hr />

        <input
          type="text"
          value={this.state.value}
          onChange={this.handleChange}
        />
        <button onClick={this.push}>新增</button>

        <ul>
          {this.props.list.map((item, index) => (
            <li key={index}>
              {item} -{" "}
              <button onClick={() => this.props.remove(item)}>删除</button>
            </li>
          ))}
        </ul>
      </>
    );
  }
}

export default App;
